<template>
  <div class="forum-square">
    <card class="top-item" id="my-head">
      <div slot="content" class="card-demo-flex card-demo-content01">
        <tab :line-width="1" :scroll-threshold='5' custom-bar-width="40px">
          <tab-item v-for="(item,i) in tabList" :key="i" :selected="tabIndex===i" @on-item-click="changeTab">{{item.name}}</tab-item>
        </tab>
      </div>
    </card>
    <component :is="currentTabComponent[tabIndex]" @focusman="handlerFocusman"></component>
  </div>
</template>
<script>
import { Vue, Component } from 'vue-property-decorator';
import { Card, Tab, TabItem } from 'vux';
import RecommenList from '../square/RecommenList';
import InfoList from '../square/InfoList';
import ActivityList from '../square/ActivityList';
import FateList from '../square/FateList';
import Secondhand from '../second/Secondhand';
import TopicList from '../square/TopicList';
import Learn from '../square/Learn';

@Component({
  components: { Card, RecommenList, InfoList, ActivityList, FateList, Secondhand, Tab, TabItem }
})
export default class Order extends Vue {
  tabIndex = 0;
  currentTabComponent = [RecommenList, TopicList, FateList, Learn, InfoList, Secondhand]
  tabList = [
    { name: '广场' },
    { name: '话题' },
    // { name: '活动' },
    { name: '菜缘' },
    { name: '学习' },
    { name: '信息' },
    { name: '二手' }
  ]
  changeTab (val) {
    localStorage.setItem('type', 0)
    this.tabIndex = val
    this.$router.replace({path: 'square', query: { type: val }})
  }
  handlerFocusman (data) {
    console.log(data)
  }
  created () {
    this.tabIndex = this.$route.query.type * 1 || 0
  }
}
</script>
<style lang="less">
  .forum-square {
    .vux-tab-item.vux-tab-selected{
      color:#EFA79B;
    }
    .weui-panel:before {
      content: initial;
    }
    .weui-panel:after {
      content: initial;
    }
    #my-head {
      width: 100%;
      position: fixed;
      top: 46px;
      left: 0;
      z-index: 1;
      .vux-tab-wrap {
        z-index: 1;
      }
    }
    .tabActive {
      font-size: 14px;
      color: #DD9494;
    }
    .vux-1px-r {
      line-height: 25px;
    }
    .vux-1px-r:after{
      content: initial;
    }
    .weui-search-bar {
      z-index: 0;
      background-color: #ffffff;
    }
    .weui-search-bar:before {
      border: none;
    }
    .weui-search-bar:after {
      border: none;
    }
    .top-item {
      margin: 0 0 4px 0;
    }
    .card-demo-flex {
      display: flex;
    }
    .card-demo-content01 {
      // padding: 10px 0;
      .vux-tab-item{
        font-size:14px;
      }
    }
    .card-demo-flex > div {
      flex: 1;
      text-align: center;
      // font-size: 12px;
    }
  }
</style>
